<template>
	<view class="under-construction">
		<view class="header">
			<view class="header-one underline">
				<view @click="goArchitecture" class="group">
					<image src="../../static/公司_单位_建筑.png" mode=""></image>
					建筑企业
				</view>
				<view @click="goProject" class="group">
					<image src="../../static/项目信息.png" mode=""></image>
					项目信息
				</view>
				<view @click="goConstructor" class="group">
					<image src="../../static/建筑师.png" mode=""></image>
					建造师
				</view>
			</view>
			<view class="header-two">
				<view @click="goCertification" class="group">
					<image src="../../static/项目申报.png" mode=""></image>
					资质等级
				</view>
				<view class="group">
					<image src="../../static/经营信息.png" mode=""></image>
					经营信息
				</view>
				<view class="group">
					<image src="../../static/荣誉.png" mode=""></image>
					荣誉信息
				</view>
			</view>
		</view>
		<view class="enterprise">
			<view class="header">
				建筑企业
			</view>
			<view v-for="item in items" :key="item.id">
				<view class="enterprise-mesg">
					<view class="title">
						测试
					</view>
					<view class="resource">
						<view class="successful">
							中标：
							<view style="display: inline;color: #007AFF;">
								0
							</view>
						</view>
						<view class="successful">
							建筑师：
							<view style="display: inline;color: #007AFF;">
								0
							</view>
						</view>
						<view class="successful">
							资质：
							<view style="display: inline;color: #007AFF;">
								1
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="more">更多建筑企业</view>
		</view>
		<view class="constructor ">
			<view class="head">
				建造师
				<view style="color: #6f7175;display: inline;">
					实时更新建造师信息
				</view>
			</view>
			
			<view v-for="item in items" :key="item.id">
				<view class="constructor-mesg">
					<view class="name">
						刘守世
					</view>
					<view class="enterprise">
						-北京长城电子工程技术有限公司adasaddasdadad
					</view>
				</view>
			</view>
			<view class="more">更多建筑企业</view>
		</view>
		<view class="successful">
			<view class="head">
				中标项目
			</view>
			
			<view v-for="item in items" :key="item.id">
				<view class="constructor-mesg">
					<view class="name">
						正文
					</view>
					<view class="enterprise">
						北京市设备安装工程
					</view>
				</view>
			</view>
			<view class="more">更多中标项目信息</view>
		</view>
		<view class="certification">
			<view class="head">
				最新资质
			</view>
			
			<view v-for="item in items" :key="item.id">
				<view class="constructor-mesg">
					<view class="name">
						正文
					</view>
					<view class="enterprise">
						北京市设备安装工程
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				items:[1,2,3,4]
			}
		},
		methods:{
			goArchitecture(){
				uni.navigateTo({
					url:"/pages/underconstruction/architecture"
				})
			},
			goConstructor(){
				uni.navigateTo({
					url:"/pages/underconstruction/constructor/constructor"
				})
			},
			goCertification(){
				uni.navigateTo({
					url:'/pages/underconstruction/certification/certification'
				})
			},
			goProject(){
				uni.navigateTo({
					url:'/pages/underconstruction/projectlist/projectList'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.under-construction {
		background: #DCDEE0;

		.header {
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;

			.header-one,
			.header-two {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 80rpx;

				.group {
					image {
						width: 80rpx;
						height: 80rpx;
					}

					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}

			.underline {
				border-bottom: solid 1px #C9C9C9;
			}
			
		}
		.enterprise{
			background: #FFFFFF;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
			.header{
				font-weight: bold;
				padding: 20rpx;
				border-bottom: solid 1px #C0C0C0;
			}
			.enterprise-mesg{
				border-bottom: solid 1px #C0C0C0;
				padding: 20rpx;
				margin: 0 20rpx;
				.title{
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				.resource{
					display: flex;
					justify-content: space-between;
					.successful{
						display: flex;
					}
				}
			}
			.more{
				text-align: center;
				background: #DCDEE0;
				color: #646566;
				margin: 20rpx;
				padding: 10rpx 0;
			}
		}
		.constructor{
			background: #FFFFFF;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			.head{
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				border-bottom: solid 1px #C0C0C0;
			}
			.constructor-mesg{
				padding: 20rpx;
				display: flex;
				border-bottom: solid 1px #C0C0C0;
				margin: 0 20rpx;
				.name{
					
					width: 180rpx;
					text-align: center;
				}
				.enterprise{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #7D7E80;
				}
			}
			.more{
				text-align: center;
				background: #DCDEE0;
				color: #646566;
				margin: 20rpx;
				padding: 10rpx 0;
			}
		}
		.successful{
			background: #FFFFFF;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			.head{
				padding: 20rpx;
				border-bottom: solid 1px #C0C0C0;
			}
			.constructor-mesg{
				padding: 20rpx;
				border-bottom: solid 1px #C0C0C0;
				margin: 0 20rpx;
				.name{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.enterprise{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #7D7E80;
				}
			}
			.more{
				text-align: center;
				background: #DCDEE0;
				color: #646566;
				margin: 20rpx;
				padding: 10rpx 0;
			}
		}
		.certification{
			background: #FFFFFF;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			.head{
				padding: 20rpx;
				border-bottom: solid 1px #C0C0C0;
			}
			.constructor-mesg{
				padding: 20rpx;
				border-bottom: solid 1px #C0C0C0;
				margin: 0 20rpx;
				.name{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.enterprise{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #7D7E80;
				}
			}
		}
	}
</style>
